<template>
    <div>
        <div class="top_box container_box">
            <p class="page-title font-weight-500">学校列表
                <el-tooltip class="item"
                            effect="dark"
                            content="刷新"
                            placement="right">
                    <el-button class="refresh-btn"
                               icon="el-icon-refresh"
                               type="primary"
                               circle
                               plain
                               @click="getTableData"
                               size="mini"></el-button>
                </el-tooltip>
            </p>
        </div>
        <div class="padding_box">
            <div class="search_box container_box">
                <el-form :inline="true"
                         label-width="80px"
                         :model="queryData">
                    <el-form-item label="">
                        <el-input clearable
                                  v-model="queryData.keyword"
                                  placeholder="请输入校区名字"></el-input>
                    </el-form-item>
                    <el-button type="primary"
                               @click="getSearchData">搜索</el-button>
                    <el-button icon="el-icon-refresh-left"
                               @click="cleanQueryData">清空筛选</el-button>
                </el-form>
            </div>

            <div class="container_box">
                <div class="order_title">
                    学校列表
                    <el-button style="float:right;"
                               type="primary"
                               @click="showAddUser">{{ '添加学校' }}</el-button>
                </div>
                <el-divider></el-divider>
                <el-table v-loading="loading"
                          :data="tableData"
                          stripe
                          class="my_table"
                          ref="multipleTable"
                          header-cell-class-name="table-header"
                          @selection-change="handleSelectionChange">
                    <el-table-column prop="schoolId"
                                     label="id"
                                     align="center">
                    </el-table-column>
                    <el-table-column prop="schoolName"
                                     label="名称"
                                     align="center">
                    </el-table-column>
                    <el-table-column prop="customerService"
                                     label="客服二维码"
                                     align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.customerService"
                                 class="avatar">
                        </template>

                    </el-table-column>
                    <el-table-column label="操作"
                                     width="180"
                                     align="center">
                        <template slot-scope="scope">
                            <!-- <el-switch class="my-switchStyle"
                                       v-model="scope.row.disable"
                                       :active-value="false"
                                       :inactive-value="true"
                                       active-color="#1B93F8"
                                       active-text="启用"
                                       inactive-color="#999999"
                                       inactive-text="禁用"
                                       @change="zt(scope.$index, scope.row)">
                            </el-switch> -->
                            <el-button size="mini"
                                       @click="editItem(scope.row)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination background
                                   layout="total, prev, pager, next,sizes, jumper"
                                   :current-page="queryData.pageIndex"
                                   :page-size="queryData.pageSize"
                                   :page-sizes="[5, 10, 20, 40]"
                                   :total="pageTotal"
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>
        <!-- 添加弹出框 -->
        <el-dialog :title="addUserData.schoolId ? '修改学校' : '添加学校'"
                   :visible.sync="addVisible"
                   width="40%">
            <el-form ref="form"
                     :rules="rules"
                     :model="addUserData"
                     label-width="120px">
                <el-form-item label="名称"
                              prop="schoolName">
                    <el-input type="text"
                              show-word-limit
                              v-model="addUserData.schoolName"></el-input>
                </el-form-item>
                <el-form-item label="客服二维码"
                              prop="schoolName">
                    <el-upload class="avatar-uploader"
                               action=""
                               :http-request="uploadHttp2"
                               name="files"
                               accept=".png,.jpg,.jpeg">
                        <img v-if="addUserData.customerService"
                             :src="addUserData.customerService"
                             class="avatar">
                        <i v-else
                           class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer"
                  class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary"
                           @click="saveAdd"
                           v-preventClick>确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import axios from '@/utils/axios.js';
import { exportExcel } from '@/utils/exportExcel.js'
import businessCard from '@/components/business-card/business-card.vue';

export default {
    name: 'basetable',
    components: {
        businessCard
    },
    data() {
        return {
            tabIndex: "0",
            pageTotal: 0,
            loading: false,
            tableData: [],
            addUserData: {
                schoolId: '',
                schoolName: "",
                customerService: '',
            },
            addVisible: false,
            queryData: {
                keyword: "",
                schoolId: '',
                pageNum: 1,
                pageSize: 10,
            },
            rules: {
                schoolName: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],

            },
        };
    },
    watch: {
    },
    filters: {
    },
    created() {
        this.getTableData();
    },
    methods: {
        handleClick(e) {
            console.log("eee", e)
            this.getTableData();
        },
        showAddUser() {
            this.addVisible = true
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.queryData.pageSize = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.queryData.pageNum = val
            this.getTableData()
        },
        getTableData() {
            var _this = this;
            this.loading = true
            let data = this.queryData
            data.type = this.tabIndex;
            axios({
                url: "/admin/school/listPage",
                method: "post",
                data
            }).then(result => {
                if (result.code == 0) {
                    console.log(">>>>>>>>", result)
                    let list = result.data.list.filter(item => item.schoolId != '0');

                    _this.tableData = list
                    _this.pageTotal = result.data.total
                }
                this.loading = false;
            }).catch(err => {
                this.loading = false;
            })
        },
        uploadHttp2({ file }) {
            let _this = this;
            this.$ossClient.ossPut(file).then(res => {
                _this.addUserData.customerService = res.requestUrls[0]
                console.log("--------------------this.addUserData.customerService", this.addUserData.customerService)
            })
        },
        // querySearchAsync(queryString, cb) {
        //     if (queryString.length > 0) {
        //         let data = {
        //             keyword: queryString
        //         }
        //         apis.getBreviaryPage(data).then(res => {
        //             let arr = []
        //             if (res.code == 0 && res.data.list) {
        //                 if (res.data.list && res.data.list.length > 0) {
        //                     res.data.list.forEach(ele => {
        //                         arr.push({
        //                             memberId: ele.memberId,
        //                             nickName: ele.nickName,
        //                             telNo: ele.telNo,
        //                             value: ele.nickName + '(' + ele.telNo + ')'
        //                         })
        //                     });
        //                     cb(arr);
        //                 } else {
        //                     let arr = [{ value: '无匹配数据' }]
        //                     cb(arr);
        //                 }
        //             }
        //         })
        //     }
        // },
        // querySearchAsync: debounceTail(function (queryString, cb) {
        //     if (queryString.length > 0) {
        //         let data = {
        //             keyword: queryString
        //         }
        //         apis.getBreviaryPage(data).then(res => {
        //             let arr = []
        //             if (res.code == 0 && res.data.list) {
        //                 if (res.data.list && res.data.list.length > 0) {
        //                     res.data.list.forEach(ele => {
        //                         arr.push({
        //                             memberId: ele.memberId,
        //                             nickName: ele.nickName,
        //                             telNo: ele.telNo,
        //                             value: ele.nickName + '(' + ele.telNo + ')'
        //                         })
        //                     });
        //                     cb(arr);
        //                 } else {
        //                     let arr = [{ value: '无匹配数据', nickName: '无匹配数据' }]
        //                     cb(arr);
        //                 }
        //             }
        //         })
        //     }
        // }, 500, this),

        // 按条件查询
        getSearchData() {
            this.queryData.pageNum = 1
            this.queryData.pageSize = 10
            this.getTableData()
        },
        cleanQueryData() {

            this.queryData = {}
            this.queryData.pageNum = 1
            this.queryData.pageSize = 10
            this.getTableData()
        },
        editItem(item) {
            this.addUserData = Object.assign({}, item)
            console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>, ', this.addUserData)
            this.addVisible = true
        },
        // 导出
        exportExcel() {
            exportExcel('用户列表', '')
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //用户详情
        UserDetails(index, row) {
            this.$router.push({ path: '/UserDetails', query: { userId: row.id } });
        },
        // 启用 || 禁用
        zt(index, row) {
            let dis = row.disable
            const data = { memberId: row.id, disable: dis }
            axios({
                url: "/admin/member/enableMember",
                method: "post",
                data
            }).then(result => {
                if (result.code == 0) {
                    // this.$message.success(result.errMsg)
                } else {
                    this.$message.error(result.errMsg)
                }
            })

        },
        // 保存添加
        saveAdd() {
            var _this = this;
            const data = this.addUserData
            axios({
                url: "/admin/school/save",
                method: "post",
                data
            }).then(result => {
                if (result.code == 0) {
                    this.$message.success(result.errMsg || '添加成功');
                    this.addUserData = {}
                    this.getTableData();
                } else {
                    this.$message.error(result.errMsg || '添加失败');
                }
                this.addVisible = false;
            })

        },
    }
};
</script>

<style lang="scss" scoped >
.my-switchStyle {
    margin-right: 25px;
}
.my-switchStyle {
    ::v-deep {
        .el-switch__label {
            position: absolute;
            display: none;
            color: #fff;
        }
        .el-switch__label--left {
            z-index: 9;
            left: 6px;
        }
        .el-switch__label--right {
            z-index: 9;
            left: -16px;
        }
        .el-switch__label.is-active {
            display: block;
        }
        .el-switch__label * {
            font-size: 12px;
        }
        .el-switch__core,
        .el-switch__label {
            width: 52px !important;
        }
    }
}
</style>
<style lang="scss">
.my-autocomplete {
    li {
        line-height: normal;
        padding: 7px;

        .name {
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .addr {
            font-size: 12px;
            color: #b4b4b4;
        }

        .highlighted .addr {
            color: #ddd;
        }
    }
}
.order-info {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.avatar-uploader {
    width: 80px;
    height: 80px;
    .el-upload {
        width: 80px;
        height: 80px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }
}
.avatar {
    width: 80px;
    height: 80px;
    display: block;
}
</style>
